<template>
  <div>
    <nav-bar>
      <img @click="$router.back()" class="left" src="../../assets/img/navbar/ic_title_back.png" slot="left" alt="">
      <span slot="center">{{title}}</span>
    </nav-bar>
    <scroll :probeType="3" class="content_scroll_detail">
      <detail-header :gameinfo="gameinfo"/>
      <detail-game-point :gameinfo="gameinfo"/>
      <detail-welfare :benefitContent="benefitContent" v-if="gameinfo.game_type === '1'"/>
      <detail-rebate :rebateContent="rebateContent" v-if="gameinfo.game_type === '1'"/>
      <detail-vip-activity :gameactivity="gameactivity"  :title="title"/>
      <detail-game-server :gameserver="gameserver" />
      <detail-game-info :gameinfo="gameinfo"/>
      <div class="footer">
        <img src="../../assets/img/datail/ic_login_text_left.png" alt="">
        <span>{{appName}}游戏速推版</span>
        <img src="../../assets/img/datail/ic_login_text_right.png" alt="">
      </div>
    </scroll>
    <div class="footer_btn">
      <van-button round :class="appName === '277'?'btn_button':'btn_button_cat'" @click="promotion">立即推广</van-button>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import Scroll from '../../components/common/scroll/Scroll.vue'
import DetailGameInfo from './childComps/DetailGameInfo.vue'
import DetailGamePoint from './childComps/DetailGamePoint.vue'
import DetailGameServer from './childComps/DetailGameServer.vue'
import DetailHeader from './childComps/DetailHeader.vue'
import DetailRebate from './childComps/DetailRebate.vue'
import DetailVipActivity from './childComps/DetailVipActivity.vue'
import DetailWelfare from './childComps/DetailWelfare.vue'
import { getDetailInfo } from '../../network/detail'
import { appName } from '../../assets/js/app'
  export default {
    name: 'Detail',
    components: {
      NavBar,
      Scroll,
      DetailHeader,
      DetailGamePoint,
      DetailVipActivity,
      DetailGameServer,
      DetailGameInfo,
      DetailWelfare,
      DetailRebate,
    },
    created () {
      this.appName = appName()
      this.iid = this.$route.params.iid
      this.getDetailList(this.iid)
    },
    data() {
      return {
        iid: null,
        title: '',
        gameinfo: {},
        gameactivity: [],
        gameserver: [],
        benefitContent: '',
        rebateContent: '',
        appName: null,
      }
    },
    methods: {
      getDetailList(iid) {
        getDetailInfo(iid).then(res => {
          console.log(res)
          if (res.state === 'ok') {
            this.gameserver = res.data.serverlist
            this.title = res.data.gameinfo.gamename
            this.gameinfo = res.data.gameinfo
            this.gameactivity = res.data.newslist
            this.benefitContent = res.data.gameinfo.benefit_content
            this.rebateContent = res.data.gameinfo.rebate_content
          }else if (res.msg === 'no_login') {
            this.$router.replace('/login')
          }
        })
      },
      promotion() {
        this.$router.push({
          path: '/detail_game_promotion',
          query: {
            info: this.gameinfo
          },
        })
      }
    },
  }
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}

.content_scroll_detail {
  position: fixed;
  width: 750px;
  top: 88px;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
}

.footer_btn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background: #fff;
  width: 750px;
  height: 92px;
  padding-bottom: env(safe-area-inset-bottom);
}

.btn_button {
  width: 592px;
  height: 76px;
  border: 0;
  background: #2f41eb;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  margin: 8px 79px;
}

.btn_button_cat {
  width: 592px;
  height: 76px;
  border: 0;
  background: linear-gradient(314deg,#ff5e39 10%, #ff8210 87%);
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  margin: 8px 79px;
}

.footer {
  width: 750px;
  height: 150px;
  background: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #999;
}

.footer span {
  padding: 0 10px;
}

.footer img {
  width: 112px;
  height: 18px;
}
</style>